const ncname = '[a-zA-Z_][\\-\\.0-9_a-zA-Z]*' // templete-name
const qnameCapture = `((?:${ncname}\\:)?${ncname})` // 标签开头
const startTagOpen = new RegExp(`^<${qnameCapture}`) // 匹配标签结尾 </div>
const endTag = new RegExp((`^<\\/${qnameCapture}[^>]*>`));
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // 匹配属性
const startTagClose = /^\s*(\/?)>/  // 匹配标签结束的 >
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g // 匹配 {{}}

function start (tagName, attrs) {
  console.log('开始标签', tagName, '属性是', attrs)
}

function chars (text) {
  console.log('文本是', text)
}

function end (tagName) {
  console.log('结束标签', tagName)
}

function parseHTML (html) {
  while (html) {
    let textEnd = html.indexOf('<')
    if (textEnd === 0) {
      let startTagMatch = parseStartTag()
      if (startTagMatch) {
        start(startTagMatch.tagName, startTagMatch.attrs)
        continue
      }
      let endTagMatch = html.match(endTag)
      if (endTagMatch) {
        advance(endTagMatch[0].length)
        end(endTagMatch[1])
        continue
      }
    }
    let text
    if (textEnd > 0) {
      text = html.substring(0, textEnd)
    }
    if (text) {
      advance(text.length)
      chars(text)
    }
  }

  function advance(n) {
    html = html.substring(n)
  }

  function parseStartTag () {
    let start = html.match(startTagOpen)
    if (start) {
      let match = {
        tagName: start[1],
        attrs: []
      }
      advance(start[0].length) // 将标签删除
      let end
      let attr
      while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
        advance(attr[0].length) // 将属性去掉
        match.attrs.push({
          name: attr[1],
          value: attr[3] || attr[4] || attr[5]
        })
      }
      if (end) { // 去掉开始标签
        advance(end[0].length)
        return match
      }
    }
  }
}

/**
 * ast语法树/虚拟dom 用对象来描述原生语法/dom节点
 * @param template
 * @returns {render}
 */
export function compileToFunction (template) {
  let root = parseHTML(template)
  return function render () {

  }
}


// <div id="app">
//   <p>hello</p>
// </div>
// 实例ast语法树
// let root = {
//   tag: 'div',
//   attrs: [{ name: 'id', value: 'app' }],
//   parent: null,
//   type: 1, // nodeType, 元素：1，属性节点：2
//   children: [{
//     tag: 'p',
//     attrs: [],
//     parent: root,
//     type: 1,
//     children: [{
//       text: 'hello',
//       type: 3
//     }]
//   }]
// }
